<template>
	<view class="page">
		<template>
			<view class="apply-top">
				<uni-nav-bar ref="navBar" statusBar color="#ffffff" :border="false" @clickLeft="goBack" backgroundColor="transparent" left-width="36px">
					<template v-slot:left>
						<image class="size-32" src="@/static/svg/icon-back.svg"/>
					</template>
				</uni-nav-bar>
				<view class="bg-wrapper">
					<image src="https://huodtg.oss-cn-hangzhou.aliyuncs.com/hd/miniprogram/icon-bg.svg"/>
				</view>
				<view class="content-wrapper">
					<view class="join-title">开启积分商城，仅需3步</view>
					<view class="step-box flex item-center justify-between">
						<view class="step" :class="current === 1 ? 'active' : ''">
							<view class="tip fs-8">第一步</view>
							<image v-if="current === 1" class="icon size-28" src="../static/icon1-active.svg" />
							<image v-else class="icon size-28" src="../static/icon1.svg" />
							<view class="text mt-4">设置积分规则</view>
						</view>
						<view class="step" :class="current === 2 ? 'active' : ''">
							<view class="tip fs-8">第二步</view>
							<image v-if="current === 2" class="icon size-28" src="../static/icon2-active.svg" />
							<image v-else class="icon size-28" src="../static/icon2.svg" />
							<view class="text mt-4">设置商城奖品</view>
						</view>
						<view class="step" :class="current === 3 ? 'active' : ''">
							<view class="tip fs-8">第三步</view>
							<image v-if="current === 3" class="icon size-28" src="../static/icon3-active.svg" />
							<image v-else class="icon size-28" src="../static/icon3.svg" />
							<view class="text mt-4">预览配置</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="current === 1" class="step-wrapper" style="margin-top: -50px;">
				<view class="title">积分获得方式</view>
				<view class="flex item-center mt-16 justify-between">
					<view class="label-box">每消费1元</view>
					<view class="flex item-center fs-12">
						奖励<input type="number" placeholder="" class="inp-box ml-8" v-model="settingData.consume">积分
					</view>
				</view>
				<view class="flex item-center mt-16 justify-between">
					<view class="label-box">首次订阅</view>
					<view class="flex item-center fs-12">
						奖励<input type="number" placeholder="" class="inp-box ml-8" v-model="settingData.firstSubscription">积分
					</view>
				</view>
				<view class="flex item-center mt-16 justify-between">
					<view class="label-box">分销活动，每获得1元佣金</view>
					<view class="flex item-center fs-12">
						奖励<input type="number" placeholder="" class="inp-box ml-8" v-model="settingData.distribution">积分
					</view>
				</view>
				<view class="flex item-center mt-16 justify-between">
					<view class="label-box">转发活动一次</view>
					<view class="flex item-center fs-12">
						奖励<input type="number" placeholder="" class="inp-box ml-8" v-model="settingData.shareActive">积分
					</view>
				</view>
				<view class="flex item-center mt-16 justify-between">
					<view class="label-box">活动转发次数限制</view>
					<view class="flex item-center fs-12">
						每日限<input type="number" placeholder="" class="inp-box ml-8" v-model="settingData.shareDailyLimit">次
					</view>
				</view>
			</view>
			<view v-if="current === 1" class="fs-12 px-12 text-color-hint">*可根据自身需求设置积分兑换规则。如根据以上默认积分规则，建议积分兑换价值为10积分：1元。</view>
			<template v-if="current === 2">
				<view class="step-wrapper" style="margin-top: -50px;">
					<view class="title">设置优惠券</view>
					<view v-for="(item,index) in couponList" :key="index" class="coupon-item flex justify-between item-center mt-16 px-12 py-14">
						<view class="left flex-col color-primary">
							<view class="fs-20 text-center"><text class="fs-12">¥</text>{{ item.amount }}</view>
							<view class="fs-10 text-center">{{ item.fullAmount == 0 ? `无门槛券` : `满${item.fullAmount}元可用` }}</view>
						</view>
						<view class="right ml-24 flex justify-between item-center">
							<view class="flex-col fs-12 text-color-hint">
								<view class="fs-16 font-bold c3 mb-4">兑换需<text class="color-primary">{{ item.requiredPoints }}</text>积分</view>
								<view>共{{item.totalNum}}张，剩{{item.remainNum}}张</view>
								<view>兑换后{{item.dayLimit}}天内有效</view>
							</view>
							<view class="flex-col">
								<view class="coupon-btn mb-8" @click="editCoupon(item)">修改</view>
								<view class="coupon-btn" @click="delProduct(item.id)">删除</view>
							</view>
						</view>
					</view>
					<view class="callback-btn inner-btn" @click="addCoupon">+ 添加优惠券</view>
				</view>
				<view class="step-wrapper">
					<view class="title mb-16">设置核销商品</view>
					<view v-for="(item,index) in goodsList" :key="index" class="goods-item flex justify-between item-center py-14 pr-12">
						<view class="left">
							<image :src="firstImage(item.goodsImages)"></image>
							<view class="stock">库存{{item.remainNum}}</view>
						</view>
						<view class="right ml-12 flex justify-between item-center">
							<view class="flex-col fs-12 text-color-hint justify-between">
								<view class="fs-14 font-bold c3 mb-2">{{item.goodsName}}</view>
								<view>¥{{item.amount}}</view>
								<view class="color-secondary-warning">{{item.requiredPoints}}积分</view>
							</view>
							<view class="flex-col flex-shrink ml-10">
								<view class="coupon-btn mb-8" @click="editGoods(item.id)">修改</view>
								<view class="coupon-btn" @click="delProduct(item.id)">删除</view>
							</view>
						</view>
					</view>
					<view class="callback-btn inner-btn" @click="addGoods">+ 添加核销商品</view>
				</view>
			</template>
			<template v-if="current === 3">
				<view class="step-wrapper" style="margin-top: -50px;">
					<view class="title">积分规则</view>
					<view class="sub-title">积分获得方式</view>
					<view>
						<view class="mb-8">每消费<text class="color-primary">1</text>元，奖励<text class="color-primary">{{ settingData.consume }}</text>积分</view>
						<view class="mb-8">首次订阅，奖励<text class="color-primary">{{settingData.firstSubscription}}</text>积分</view>
						<view class="mb-8">每获得<text class="color-primary">1</text>元佣金，奖励<text class="color-primary">{{settingData.distribution}}</text>积分</view>
						<view>转发活动<text class="color-primary">1</text>次，奖励<text class="color-primary">{{settingData.shareActive}}</text>积分，每日<text class="color-primary">{{settingData.shareDailyLimit}}</text>次</view>
					</view>
				</view>
				<view class="step-wrapper">
					<view class="title">优惠券</view>
					<view v-for="(item,index) in couponList" class="coupon-item flex justify-between item-center mt-16 px-12 py-14">
						<view class="left flex-col color-primary">
							<view class="fs-20 text-center"><text class="fs-12">¥</text>{{ item.amount }}</view>
							<view class="fs-10 text-center">{{ item.fullAmount == 0 ? `无门槛券` : `满${item.fullAmount}元可用` }}</view>
						</view>
						<view class="right ml-24 flex">
							<view class="flex-col fs-12 text-color-hint">
								<view class="fs-16 font-bold c3">{{ item.goodsName }}</view>
								<view class="color-secondary-warning">{{ item.requiredPoints }}积分兑换</view>
								<view>共{{item.totalNum}}张，剩{{item.remainNum}}张</view>
								<view>兑换后{{item.dayLimit}}天内有效</view>
							</view>
						</view>
					</view>
				</view>
				<view class="step-wrapper">
					<view class="title mb-16">核销商品</view>
					<view v-for="(item,index) in goodsList" :key="index" class="goods-item flex justify-between item-center py-14 pr-12">
						<view class="left">
							<image :src="firstImage(item.goodsImages)"></image>
						</view>
						<view class="right ml-12 flex justify-between item-center">
							<view class="flex-col fs-12 text-color-hint justify-between">
								<view class="fs-14 font-bold c3 mb-2">{{item.goodsName}}</view>
								<view><text class="color-secondary-warning">{{item.requiredPoints}}</text>积分 <text class="text-throughline">¥{{item.amount}}</text></view>
								<view>共计{{item.totalNum}}件，剩余{{item.remainNum}}件</view>
							</view>
						</view>
					</view>
				</view>
			</template>
			<view class="btn-box flex item-center justify-between">
				<view v-if="current > 1" class="callback-btn" style="width: 44%;" @click="preStep">上一步</view>
				<view v-if="current !== 3" class="release-btn" :style="`width: ${current === 1 ? '100%' : '44%'}`" @click="nextStep">下一步</view>
				<view v-else class="release-btn" style="width: 44%;" @click="confirm">确认</view>
			</view>
		</template>
		<couponPopup ref="couponDialog" @refresh="getContent" />
	</view>
	
</template>

<script setup>
	import {ref,onMounted} from 'vue'
	import {onShow} from '@dcloudio/uni-app'
	import {mathHeight, isVideoFile} from '@/utils/index.js'
	import {saveSettingsApi, myProductListApi, removeProductApi, getSettingsApi, openApi} from '@/pagesJ/api/index.js'
	import couponPopup from './components/couponPopup.vue';
	import {useUserStore} from '@/stores/modules/user.js'
	const userStore = useUserStore()
	const scorllH = mathHeight(0)
	const goBack = () => {
		uni.navigateBack()
	}
	const couponDialog = ref(null)
	const current = ref(1)
	const settingData = ref({
		consume: 1,
		firstSubscription: 100,
		distribution: 10,
		shareActive: 5,
		shareDailyLimit: 2
	})
	const couponList = ref([])
	const goodsList = ref([])
	const scrollTop = ref(0)
	const topUp = () => {
		uni.pageScrollTo({
		    scrollTop: 0,
		    duration: 300
		  });
	}
	const firstImage = (list) => {
		return list.find(item => !isVideoFile(item))
	}
	const scrollFn = (e) => {
		scrollTop.value = e.detail.scrollTop
	}
	const nextStep = () => {
		if(current.value === 1){
			if (!settingData.value.consume && settingData.value.consume!=0) {
				showToast('请填写每消费1元奖励积分')
				return
			}
			if (!settingData.value.firstSubscription && settingData.value.firstSubscription!=0) {
				showToast('请填写首次订阅奖励积分')
				return
			}
			if (!settingData.value.distribution && settingData.value.distribution!=0) {
				showToast('请填写每获得1元佣金奖励积分')
				return
			}
			if (!settingData.value.shareActive && settingData.value.shareActive!=0) {
				showToast('请填写转发活动奖励积分')
				return
			}
			if (!settingData.value.shareDailyLimit && settingData.value.shareDailyLimit!=0) {
				showToast('请填写活动转发次数限制')
				return
			}
			saveSettingsApi(settingData.value).then(res => {
				current.value = current.value + 1
				topUp()
			})
		}
		if(current.value === 2){
			if(!couponList.value.length && !goodsList.value.length){
				showToast('请设置优惠券或核销商品')
				return
			}
			current.value = current.value + 1
			topUp()
		}
	}
	const confirm = () => {
		uni.showModal({
			title: '确认开启积分商城吗？',
			content: '点击确认后，积分商城将立即生效',
			cancelText: '再想想',
			confirmColor: '#FA4543',
			cancelColor: 'rgba(51, 51, 51, 0.60)',
			success: (res) => {
				if (res.confirm) {
					openApi().then(res => {
						userStore.getUserInfo()
						uni.reLaunch({
							url: `/pagesJ/integralSetting/mall`
						})
					})
				}
			}
		})
	}
	const preStep = () => {
		current.value = current.value - 1
		topUp()
	}
	const addGoods = () => {
		uni.navigateTo({
			url: `/pagesJ/integralSetting/add-goods`
		})
	}
	const addCoupon = () => {
		couponDialog.value.showPop(true)
	}
	const editCoupon = (item) => {
		couponDialog.value.showPop(true, item)
	}
	const delProduct = (id) => {
		removeProductApi({id}).then(res => {
			showToast('删除成功')
			getCouponList()
			getGoodsList()
		})
	}
	const editGoods = (id) => {
		uni.navigateTo({
			url: `/pagesJ/integralSetting/add-goods?id=${id}`,
		})
	}
	const getCouponList = () => {
		myProductListApi({productType: 1}).then(res => {
			couponList.value = res
		})
	}
	const getGoodsList = () => {
		myProductListApi({productType: 2}).then(res => {
			goodsList.value = res
		})
	}
	const getSettings = () => {
		getSettingsApi().then(res => {
			settingData.value = Object.assign(settingData.value, res)
		})
	}
	const getContent = () => {
		getSettings()
		getCouponList()
		getGoodsList()
	}
	const showToast = (title) => {
		uni.showToast({
			title,
			icon: 'none'
		})
	}
	onShow(() => {
		getContent()
	})
	
</script>
<style lang="scss" scoped>
	.page {
		position: relative;
		width: 100vw;
		min-height: 100vh;
		background-color: #F5F5F5;
		padding-bottom: 90px;
	}

	.apply-top {
		background: #FA4543;
		padding: 0 0 60px;
	}
	
	.bg-wrapper{
		z-index: 0;
		position: absolute;
		right: 0;
		top: 60px;
		image{
			width: 178px;
			height: 188px;
		}
	}
	
	.content-wrapper{
		position: relative;
		z-index: 1;
		margin: 20px 10px 0;
	}

	.join-title {
		font-weight: bold;
		font-size: 24px;
		color: #FFFFFF;
	}

	.step-box {
		margin: 20px 0;
		.step{
			width: 114px;
			height: 77px;
			background: #F87271;
			border-radius: 8px;
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 12px;
			color: #fff;
			.tip{
				color: #fff;
				background: #FE5E5D;
				border-radius: 8px 0 8px 0;
				align-self: self-start;
				padding: 5px 6px;
			}
			&.active{
				background: #fff;
				color: #FA4543;
				.tip{
					background: #EF2F2C;
				}
			}
		}
	}
	.step-wrapper{
		background: #fff;
		border-radius: 12px;
		margin: 0 10px 16px;
		padding: 16px 12px;
		.title{
			font-weight: 600;
			font-size: 20px;
			color: #333333;
		}
		.sub-title{
			font-weight: 600;
			font-size: 14px;
			color: #333333;
			margin: 16px 0 8px;
		}
		.label-box {
			font-size: 14px;
			font-weight: 600;
			line-height: 20px;
			color: #333333;
		}
		.inp-box {
			width: 77px;
			background: #F5F5F5;
			height: 32px;
			border-radius: 8px 8px 8px 8px;
			padding: 0 10px;
			line-height: 32px;
		}
		.coupon-item{
			background-image: url("https://huodtg.oss-cn-hangzhou.aliyuncs.com/hd/miniprogram/bg-coupon.png");
			background-repeat: no-repeat;
			background-size: 100%;
			.left{
				width: 68px;
			}
			.right{
				width: 240px;
				.coupon-btn{
					color: #818181;
					font-size: 10px;
					border: 1px solid rgba(51,51,51,0.6);
					border-radius: 4px;
					padding: 2px 12px;
				}
			}
		}
		.goods-item{
			.left{
				position: relative;
				image{
					width: 78px;
					height: 78px;
					border-radius: 12px;
				}
				.stock{
					position: absolute;
					bottom: 0;
					border-radius: 0px 0px 12px 12px;
					background: rgba(51,51,51,0.6);
					width: 100%;
					text-align: center;
					padding: 2px;
					font-size: 12px;
					color: #fff;
				}
			}
			.right{
				width: 240px;
				.coupon-btn{
					color: #818181;
					font-size: 10px;
					border: 1px solid rgba(51,51,51,0.6);
					border-radius: 4px;
					padding: 2px 12px;
				}
			}
		}
	}
	.btn-box {
		position: fixed;
		bottom: 0px;
		left: 0;
		width: 100%;
		background-color: #ffffff;
		z-index: 7;
		padding: 10px 0;
	}
	.release-btn {
		height: 46px;
		padding: 12px, 20px, 12px, 20px;
		border-radius: 8px;
		background: #FA4543;
		color: #ffffff;
		margin: 10px;
		text-align: center;
		line-height: 46px;
	}
	.callback-btn{
		height: 46px;
		padding: 12px, 20px, 12px, 20px;
		border-radius: 8px;
		background: #ffffff;
		color: #FA4543;
		border: 1px solid #FA4543;
		margin: 10px;
		text-align: center;
		line-height: 46px;
		&.inner-btn{
			margin: 16px 0 0 0;
		}
	}
</style>